<template>
  <div class="lazy-load-test">
    <h3>懒加载测试</h3>

    <!-- 测试图片列表 -->
    <div class="test-images">
      <div v-for="(image, index) in testImages" :key="index" class="test-image-item">
        <h4>图片 {{ index + 1 }}</h4>
        <img
          v-lazy="image.src"
          :alt="image.alt"
          class="lazy-img test-img"
        />
        <p>优先级: {{ image.priority }}</p>
      </div>
    </div>

    <!-- 队列状态显示 -->
    <div class="queue-status">
      <h4>队列状态</h4>
      <p>队列长度: {{ queueLength }}</p>
      <p>已加载: {{ loadedCount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LazyLoadTest',
  data() {
    return {
      testImages: [
        {
          src: 'https://picsum.photos/300/200?random=1',
          alt: '测试图片1',
          priority: '高'
        },
        {
          src: 'https://picsum.photos/300/200?random=2',
          alt: '测试图片2',
          priority: '中'
        },
        {
          src: 'https://picsum.photos/300/200?random=3',
          alt: '测试图片3',
          priority: '低'
        },
        {
          src: 'https://picsum.photos/300/200?random=4',
          alt: '测试图片4',
          priority: '最低'
        }
      ],
      loadedCount: 0
    }
  },
  computed: {
    queueLength() {
      return window.lazyLoadQueue ? window.lazyLoadQueue.length : 0;
    }
  },
  mounted() {
    // 监听图片加载事件
    this.$nextTick(() => {
      const images = document.querySelectorAll('.test-img');
      images.forEach(img => {
        img.addEventListener('load', () => {
          this.loadedCount++;
        });
      });
    });
  }
}
</script>

<style scoped>
.lazy-load-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.test-image-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.test-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

.queue-status {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.queue-status h4 {
  margin-top: 0;
  color: #333;
}

.queue-status p {
  margin: 5px 0;
  color: #666;
}
</style>
